<template>
  <div class="add-form">
    <el-dialog
      title="题目预览"
      :visible.sync="dialogFormVisible"
      width="70%"
      @close="thevideobutton = false"
    >
      <el-form ref="form" label-width="80px" v-model="Subjectdata">
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【题型】：{{
                getthetextvalue(questionType, Subjectdata.questionType).label
              }}
            </div></el-col
          >
          <el-col :span="6"
            >【编号】：{{ Subjectdata.id }}
            <div class="grid-content bg-purple-light"></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【难度】：{{
                getthetextvalue(difficulty, Subjectdata.difficulty).label
              }}
            </div></el-col
          >
          <el-col :span="6"
            >【标签】：{{ Subjectdata.tags }}
            <div class="grid-content bg-purple-light"></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【学科】：{{ Subjectdata.subjectName }}
            </div></el-col
          >
          <el-col :span="6"
            >【目录】：{{ Subjectdata.directoryName }}
            <div class="grid-content bg-purple-light"></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【方向】：{{ Subjectdata.direction }}
            </div></el-col
          >
        </el-row>
        <hr />
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">【题干】：</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div
              class="grid-content bg-purple-dark"
              v-html="Subjectdata.question"
              style="color: blue"
            ></div
          ></el-col>
        </el-row>
        <el-row v-if="Subjectdata.questionType !== '3'">
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              {{ questionType[Subjectdata.questionType - 1].label }}
              选项：（以下选中的选项为正确答案）
            </div></el-col
          >
        </el-row>
        <!-- 单选按钮 -->
        <div v-if="Subjectdata.questionType === '1'">
          <el-row v-for="item in Subjectdata.options" :key="item.id">
            <el-radio
              :label="item.code"
              :disabled="!item.isRight"
              :value="item.code"
              >{{ item.title }}</el-radio
            >
          </el-row>
        </div>
        <!-- 多选按钮 -->
        <div v-if="Subjectdata.questionType === '2'">
          <el-row v-for="item in Subjectdata.options" :key="item.id">
            <el-checkbox-group v-model="checkboxCurrent">
              <el-checkbox
                :label="item"
                :disabled="!item.isRight"
                :value="item.code"
                >{{ item.title }}</el-checkbox
              >
            </el-checkbox-group>
          </el-row>
        </div>
        <el-row v-else></el-row>
        <hr />
        <el-row>
          <el-col :span="24"

            ><div class="grid-content bg-purple-dark">
              【参考答案】 ：<el-button
                type="danger"
                @click="thevideobutton = !thevideobutton"
                >视频答案预览</el-button
              >
              <br />
              <!-- 视频弹框 -->
              <video
                :src="Subjectdata.videoURL"
                v-if="thevideobutton"
                width="70%"
                controls
              ></video></div
          ></el-col>
        </el-row>
        <hr />
        <el-row>
          <!-- <el-col :span="24"
            ><div
              class="grid-content bg-purple-dark answer"
              v-html="'【答案解析】：' + Subjectdata.answer"
            ></div
          ></el-col> -->
          <el-col :span="3"><div class="grid-content bg-purple">【答案解析】 ：</div></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light answer" v-html="Subjectdata.answer" ></div
          ></el-col>
        </el-row>
        <hr />
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              【题目备注】 ：{{ Subjectdata.remarks }}
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 关闭按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormH">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: 'TopicPreview',
  props: {
    Subjectdata: {
      type: [Array, Object],
      required: true
    },
    checkboxCurrent: {
      type: Array
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      radio: 1,
      checked: true,
      questionType,
      difficulty,
      thevideobutton: false
    }
  },
  computed: {
    // 获取题目的类型和难度
    getthetextvalue () {
      return function (arr, val) {
        return arr.find((t) => {
          return t.value === +val
        })
      }
    }
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.el-row {
  padding: 10px 0;
}
.answer {
  /deep/p {
    margin: 0;
  }
}
</style>>
